<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="css/base.css">
  <script src="https://s4.ssl.qhres.com/!928fb688/spritejs.min.js"></script>
  <style>
    html, body {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      overflow: hidden;
    }

    #scene-container {
      width: 100%;
      height: 100%;
    }
    #box-rect-demo {
      position: absolute;
      padding: 20px 0 0 20px;
      top: 0;
    }
  </style>
</head>
<body>
  <div id="scene-container"></div>
  <script>
  const {Scene, Label} = spritejs
  const scene = new Scene('#scene-container', {
    viewport: ['auto', 'auto'],
    resolution: [1540, 600],
    stickMode: 'width',
  })
  const layer = scene.layer()

  class KeyButton extends Label {
    pointCollision(evt) {
      if(super.pointCollision(evt)) {
        return true
      }
      return evt.originalEvent.key === this.text
    }
  }
  KeyButton.defineAttributes({
    init(attr) {
      attr.setDefault({
        font: '42px Arial',
        border: {width: 4, color: 'black'},
        width: 50,
        height: 50,
        anchor: [0.5, 0.5],
        textAlign: 'center',
        lineHeight: 50,
      })
    },
  })

  const keys = [
    'qwertyuiop',
    'asdfghjkl',
    'zxcvbnm',
  ]
  for(let i = 0; i < 3; i++) {
    const keyButtons = [...keys[i]]
    for(let j = 0; j < keyButtons.length; j++) {
      const key = new KeyButton(keyButtons[j])
      key.attr({
        pos: [250 + j * 80, 200 + i * 100],
      })
      key.on(['keydown', 'mousedown'], (evt) => {
        key.attr({
          bgcolor: 'grey',
          fillColor: 'white',
        })
      })
      key.on(['keyup', 'mouseup'], (evt) => {
        key.attr({
          bgcolor: 'transparent',
          fillColor: 'black',
        })
      })
      layer.append(key)
    }
  }

  const label = new Label('轻敲键盘')
  label.attr({
    anchor: [0.5, 0],
    pos: [770, 50],
    font: '42px Arial',
  })
  layer.append(label)

  scene.delegateEvent('keydown', document)
  scene.delegateEvent('keyup', document)
  </script>
</body>
</html>
